<template>
  <div>
    <s-table
      bordered
      ref="table"
      :row-key="(record) => record.id"
      :columns="checkColumns"
      :data="checkData"
    >
      <div
        slot="filterDropdown"
        slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
        style="padding: 8px"
      >
        <a-input
          v-ant-ref="c => (searchInput = c)"
          :placeholder="`筛选${column.title}`"
          :value="selectedKeys[0]"
          style="width: 188px; margin-bottom: 8px; display: block;"
          @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
        />
        <a-button
          type="primary"
          icon="search"
          size="small"
          style="width: 90px; margin-right: 8px"
          @click="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
        >
          筛选
        </a-button>
        <a-button size="small" style="width: 90px" @click="() => handleReset(clearFilters)">
          重置
        </a-button>
      </div>
      <template slot="xu" slot-scope="text,record,index">{{index + 1}}</template>
      <template slot="category" slot-scope="text">
        {{categoryOpts[text]}}
      </template>
      <template slot="action">
        <a-button size="small" type="primary" style="margin-right:5px" @click="editNo">编辑</a-button>
        <a-button size="small" type="danger" @click="editStatus">案件状态</a-button>
      </template>
    </s-table>
    <a-modal
      centered
      v-model="receiptVisible"
      title="回执管理"
      :width="800"
    >
      <a-row :gutter="10">
        <a-col :span="16">
          <a-timeline>
            <a-timeline-item>【2015-09-01】【陈雪】上传了【驳回文件】</a-timeline-item>
          </a-timeline>
        </a-col>
        <a-col :span="8">
          <a-form-model
            :model="receiptForm"
          >
            <a-form-model-item label="状态">
              <a-radio-group>
                <a-radio :style="radioStyle" :value="1">
                  提交
                </a-radio>
                <a-radio :style="radioStyle" :value="2">
                  受理
                </a-radio>
                <a-radio :style="radioStyle" :value="3">
                  审核
                </a-radio>
                <a-radio :style="radioStyle" :value="4">
                  补证
                </a-radio>
                <a-radio :style="radioStyle" :value="5">
                  审查意见
                </a-radio>
                <a-radio :style="radioStyle" :value="6">
                  驳回
                </a-radio>
              </a-radio-group>
            </a-form-model-item>
            <a-form-model-item label="上传文件">
              <a-upload
                name="file"
                :multiple="true"
                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
              >
                <a-button size="small" icon="upload" type="primary">选择文件</a-button>
              </a-upload>
            </a-form-model-item>
          </a-form-model>
        </a-col>
      </a-row>
    </a-modal>
    <a-modal
      centered
      title="编辑注册号"
      v-model="noVisible"
      :width="300"
    >
      <a-form-model-item label="注册号">
        <a-input type="text" placeholder="请输入注册号" />
      </a-form-model-item>
    </a-modal>
  </div>
</template>

<script>
import { STable } from '@/components'
import otherColumns from '@/columns/other'

export default {
  components: {
    STable
  },
  name: 'Register',
  data () {
    return {
      checkColumns: otherColumns.register,
      checkData: parameters => {
        return new Promise(resolve => {
          resolve({
            data: [
              {
                'id': 6,
                'tm_no': '2000050',
                'tm_name': '天猫',
                'adviser_name': '程婉',
                'notes': '阿达水电费',
                'status': '下证',
                'category': '3',
                'check_name': '',
                'created_at': '2021-08-23 09:57:14'
              }
            ]
          })
        })
      },
      categoryOpts: {
        '1': '1化工原料',
        '2': '2油漆染料',
        '3': '3日化用品',
        '4': '4油脂染料',
        '5': '5医用药物',
        '6': '6金属材料',
        '7': '7机械机器',
        '8': '8手工用具',
        '9': '9电子产品',
        '10': '10医疗器械',
        '11': '11厨卫设备',
        '12': '12交通工具',
        '13': '13爆炸物品',
        '14': '14珠宝首饰',
        '15': '15乐器',
        '16': '16办公用品',
        '17': '17塑料橡胶',
        '18': '18皮革制品',
        '19': '19非金属建材',
        '20': '20家具',
        '21': '21厨具卫具',
        '22': '22纺织原料',
        '23': '23纱线',
        '24': '24床上用品',
        '25': '25服装鞋帽',
        '26': '26服饰绣品',
        '27': '27地毯席类',
        '28': '28娱乐玩具',
        '29': '29加工食品',
        '30': '30方便食品',
        '31': '31未加工食品',
        '32': '32啤酒饮料',
        '33': '33酒类',
        '34': '34烟及烟类',
        '35': '35广告销售',
        '36': '36金融房产',
        '37': '37建筑装饰',
        '38': '38通讯服务',
        '39': '39物流旅游',
        '40': '40加工服务',
        '41': '41教育培训',
        '42': '42科技研发',
        '43': '43餐饮酒店',
        '44': '44医疗保健',
        '45': '45提供人员'
      },
      searchInput: null,
      searchText: '',
      searchedColumn: '',
      receiptForm: {},
      queryParam: {},
      selectedRowKeys: [],
      receiptVisible: false,
      noVisible: false,
      radioStyle: {
        display: 'block',
        height: '30px',
        lineHeight: '30px'
      }
    }
  },
  created () {
    this.queryParam['filter[status]'] = 3
  },
  methods: {
    editNo () {
      this.noVisible = true
    },
    editStatus () {
      this.receiptVisible = true
    }
  }
}
</script>

<style scoped>

</style>
